<script setup lang="ts">
import {computed, ref} from 'vue'
import TodoItemList from './TodoItemList.vue'

interface TodoItem {
  id: number
  text: string
  completed: boolean
}
// 1. 确保你有这一行，用来定义 props
const props = defineProps<{
  initialTodos?: TodoItem[]
}>()

const newTodo = ref('')

// 2. 确保 todos 的定义是这样的，它使用了 props
const todos = ref<TodoItem[]>(props.initialTodos || [])
let idCounter = 0

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: idCounter++,
      text: newTodo.value.trim(),
      completed: false
    })
    newTodo.value = ''
  }
}

const toggleTodo = (id: number) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.completed = !todo.completed
  }
}

const deleteTodo = (id: number) => {
  todos.value = todos.value.filter(t => t.id !== id)
}

// 新增编辑相关状态
const editingId = ref<number | null>(null)
const editingText = ref('')

// 新增编辑方法
const startEdit = (todo: TodoItem) => {
  editingId.value = todo.id
  editingText.value = todo.text
}

const saveEdit = (id: number) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.text = editingText.value.trim()
    editingId.value = null
  }
}
// 在你的 script 的任意位置添加这个方法
const clearAll = () => {
  todos.value = []
}
</script>

<template>
  <div class="wrapper">
    <h1>待办事项</h1>
    <div class="input-group">
      <input
          type="text"
        v-model="newTodo"
        @keyup.enter="addTodo"
        placeholder="请输入新任务..."
        class="todo-input"
      />
      <button @click="addTodo" class="add-button">添加任务</button>
    </div>
    <TodoItemList
      :todos="todos"
      :editingId="editingId"
      :editingText="editingText"
      @toggle-todo="toggleTodo"
      @delete-todo="deleteTodo"
      @start-edit="startEdit"
      @save-edit="saveEdit"
      @update:editingText="editingText = $event"
    />
    <button
        @click="clearAll"
        class="clear-all-btn"
        style="margin-top: 20px; padding: 10px 20px;"
    >
      全部清除
    </button>
    <!-- 新增组件文档区块 -->
    <section class="component-docs">
      <h3>组件结构说明</h3>
      <pre>
待办事项组件结构：
src/components/
├─ TodoList.vue (主组件)
└─ TodoItemList.vue (子组件)

TodoList.vue 功能：
- 属性：todos/editingId/editingText
- 方法：addTodo/toggleTodo/deleteTodo/startEdit/saveEdit
- 数据结构：{id, text, completed}

TodoItemList.vue 接口：
- 接收：todos/editingId/editingText
- 事件：toggle-todo/delete-todo/start-edit/save-edit
      </pre>
    </section>
  </div>
</template>

<style scoped>
.component-docs {
  margin-top: 3rem;
  padding: 1.5rem;
  background: rgba(241, 243, 245, 0.8);
  border-radius: 8px;
}

.component-docs pre {
  white-space: pre-wrap;
  color: #2c3e50;
  line-height: 1.6;
  font-family: 'Courier New', monospace;
}

/* 新增容器样式 */
.wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 20px;
  text-align: center; /* 让标题居中 */
  position: static; /* 移除绝对定位 */
  transform: none; /* 移除位置偏移 */
}

h1 {
  margin-bottom: 2rem; /* 增加标题下方间距 */
}

/* 优化输入区域 */
.input-group {
  display: flex;
  max-width: 600px;
  margin: 0 auto 2rem;
  gap: 1rem; /* 输入框和按钮之间的间距 */
}

.todo-input {
  flex: 1; /* 输入框占据剩余空间 */
  padding: 12px 16px;
  font-size: 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.todo-input:focus {
  border-color: #42b883;
  box-shadow: 0 0 8px rgba(66, 184, 131, 0.2);
}

/* 调整按钮样式 */
.add-button {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 8px;
  white-space: nowrap; /* 防止按钮文字换行 */
}
</style>
